import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    // minimumWidth: 800
    // minimumHeight: 400
    // maximumWidth: 800
    // maximumHeight: 400

    opacity: 1

    signal aSigaal()

    onASigaal: {
            console.log("Height:", height)
        }

    onWidthChanged:{
        console.log("width:", width)
    }

    Rectangle{
            id:rect//每个组件都可以有id，但是不能重复
            x:120
            y:120
            z:1
            antialiasing:true
            border.color: "#847203"
            color: "#545454"
            border.width: 3
            width: 100
            height: 50
            gradient: Gradient{//渐变，从上到下
                        GradientStop{position: 0.0;color: "#634543"}//起点及颜色
                        // GradientStop{position: 0.5;color: "#459865"}//起点及颜色
                        GradientStop{position: 1.0;color: "#217342"}//终点及颜色
                    }
        }

    Button{
        id:btn1 //访问这个组件，用他的id就行了
        objectName: "btn1ON"//不设置也行，在获取按钮名可能就会出现组件名(地址)的情况
        width: 80
        height: 40
        x:100
        y:50
        focus:true
        //设置背景，包括边框
        background: Rectangle{
            //输入btn1.什么，可以获取按钮状态，然后使用三重表达式去切换颜色
            color: btn1.focus ? "#131313" : "#f1f1f1"
            border.color: "#888"
        }
        onClicked: {
            console.log("按钮1")
        }
        //这里的按键事件，必须要按钮处于聚焦才能触发
        Keys.onRightPressed: {
            btn2.focus = true
        }
        Keys.onLeftPressed: {
            btn3.focus = true
        }
    }

    Button{
            id:btn2
            objectName: "btn2ON"
            width: 80
            height: 40
            x:200
            y:50
            focus:false
            background: Rectangle{
                //灵活应用可以设置多种触发改变按钮的样式
                color: btn2.focus ? "#131313" : btn2.hovered ? "#888" : "#f1f1f1"
                border.color: "#888"
            }
            onClicked: {
                console.log("按钮2")
                aSigaal()
            }
            Keys.onRightPressed: {
                btn3.focus = true
            }
            Keys.onLeftPressed: {
                btn1.focus = true
            }
        }
    Button{
            id:btn3
            objectName: "btn30N"
            width: 80
            height: 40
            x:300
            y:50
            focus:false
            background: Rectangle{
                //灵活应用可以设置多种触发改变按钮的样式
                color: btn3.focus ? "#131313" : btn3.hovered ? "#888" : "#f1f1f1"
                border.color: "#888"
            }
            onClicked: {
                console.log("按钮3")
            }
            Keys.onLeftPressed: {
                btn2.focus = true
            }
            Keys.onRightPressed: {
                btn1.focus = true
            }
        }





}
